const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  //入口文件,在分环境打包时,需要修改为正确的路径
  entry: path.resolve(__dirname, "../src/index.js"),
  //出口文件
  output: {
    path: path.resolve(__dirname, "../build"),
    //相对于出口文件的路径
    filename: "./js/bundle.js"
  },
  //loader配置
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader,'css-loader', "less-loader"],
      },
      {
        test: /\.less$/i,
        use: [
            //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
        type: "asset",
        parser: {
            dataUrlCondition: {
                maxSize:30* 1024, // 小于30kb以下的图片会被打包成base64格式
            },
        },
        generator: {
            filename: 'images/[name][ext]'
        }
     },
      // {
      // test: /\.html$/i,
      // use: {
      //   loader: 'html-loader'
      // }
      // } 
    ],
  },
  //优化配置
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  //插件的配置
  plugins: [new MiniCssExtractPlugin({
    //输出独立文件的文件名,相对于入口文件的路径
    filename: './css/main.css'
}), new HtmlWebpackPlugin({
  filename: "index.html",
  template: path.resolve(__dirname,"../public/index.html"),
  minify: {
    collapseWhitespace: true,
    keepClosingSlash: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true
  } 
}),new ESLintPlugin({
  fix: true
}),new CopyWebpackPlugin({
  patterns: [{ 
    //路径是当前所在文件夹中的public
    // from: "../public", 
    from: path.resolve(__dirname,"../public"), 
    to: "public",
    //配置复制时忽略的文件 
    globOptions: {
      ignore: ["**/index.html"]
    }
  }],
})],

  //模式
  mode: "production"
}